import React, { useContext } from 'react'
import Taro from '@tarojs/taro'
import { View, Button } from '@tarojs/components'
import './mall.less'
import { UserContext } from "../../app";

export default () => {
  const click = () => {
    Taro.navigateTo({ url: '/pages/mall/products?merchantId=1' })
  }

  const { user } = useContext(UserContext)

  return (
    <View className='base'>
      <View className='flex-column center'>
        <View className=''>[vip]</View>
        <View className='flex-row'>
          <View>[币]</View>
          <View>{user.points}</View>
          <View>金币&gt;</View>
        </View>
      </View>
      <View className='flex-row'>
        <View>开通VIP会员，享双倍金币获取速度</View>
        <View>&gt;</View>
      </View>

      <View>
        <Button onClick={()=>{Taro.navigateTo({url: '/pages/lightup/lightup'})}}>点亮商户</Button>
      </View>
      <View className='box'>
        <View className='flex-row'>
          <View onClick={click}>
            <View>[image]</View>
            <View>母婴用品</View>
          </View>
          <View onClick={click}>
            <View>[image]</View>
            <View>母婴用品</View>
          </View>
          <View onClick={click}>
            <View>[image]</View>
            <View>母婴用品</View>
          </View>
          <View onClick={click}>
            <View>[image]</View>
            <View>母婴用品</View>
          </View>
        </View>
        <View className='flex-row'>
          <View onClick={click}>
            <View>[image]</View>
            <View>母婴用品</View>
          </View>
          <View onClick={click}>
            <View>[image]</View>
            <View>母婴用品</View>
          </View>
          <View onClick={click}>
            <View>[image]</View>
            <View>母婴用品</View>
          </View>
          <View onClick={click}>
            <View>[image]</View>
            <View>母婴用品</View>
          </View>
        </View>
      </View>

      <View className='box'>[广电妈妈卡]</View>

      <View className='box'>
        <View style='text-align: center'>-热门精选-</View>
        <View className='flex-row' style='flex-wrap: wrap'>
          {/*            <block wx:for="{{6}}">
              <View style="width: 300rpx">
                <View>[image]</View>
                <View>商品名</View>
                <View>2000金币</View>
              </View>
            </block>*/}
        </View>

      </View>
    </View>
  )
}
